import styled from "styled-components";
import style from '../../../assets/Global-style';

export const DetailContainer = styled.div`
    width:100%;
    height:calc(100vh);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color:#ffffff;
    z-index:3;
    display:flex;
    flex-flow: column;
    .navbar{
        width:100%;
        height:7%;
      
        display:flex;
        flex-flow: row;
        align-items:center;
        justify-content:space-between;
        .navbar_left{
            padding-left:5%;
            svg{
                width:1.3rem;
                height:1.3rem;
            }
        }
        .navbar_mid{
            padding-bottom:1%;
        }
        .navbar_right{
            padding-right:5%;
            svg{
                width:1.3rem;
                height:1.3rem;
            }
        }
    }
    
    .titlebar{
        background-color:pink;
        width:100%;
        height:12%;
        display:flex;
        flex-flow:row;
        align-items:center;
        background-color:white;
        border-top: 1px solid #bdcbdf;
        .homepage{
            display:flex;
            flex-flow:column;
            margin:0 3% 0 5%;
            height:70%;
            width:12%;
            align-items:center;
            justify-content:space-between;
            svg{
                width:2rem;
                height:3rem;
            }
            .home{
                font-size:.6rem;
            }
        }
        .shopcar{
            display:flex;
            flex-flow:column;
            margin:0 3% 0 5%;
            height:70%;
            width:12%;
            svg{
                width:2rem;
                height:3rem;
            }
            .shop{
                font-size:.6rem;
            }
        }
        .buttontotal{
            margin-left:auto;
            width:55%;
            height:70%;
           
            margin-right:4%;
            display:flex;
            border:1px solid #000;
            .buttonleft{
                width:50%;
                height:100%;
                background-color:white;
                text-align:center;
                line-height:3rem;
                font-weight:300;
            }
            .buttonright{
                text-align:center;
                line-height:3rem;
                width:50%;
                height:100%;
                background-color:black;
                color:white;
            }
        }
     } 

`